<template>
    <div class="cashlist">
        <el-card class="box-card">
            <el-input v-model="phoneNum" class="w200" placeholder="根据手机号搜索"></el-input>
            <el-select v-model="cashStatus" placeholder="根据提现状态搜索" class="w200">
                <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
            <el-button type="primary" @click="clear">清空</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="primary" @click="out">导出</el-button>
            <el-table :data="tableData" style="width: 100%" border stripe>
                <el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
                <el-table-column prop="mobile" label="账号" width="97" align="center"> </el-table-column>
                <el-table-column prop="nickName" label="昵称" width="180" align="center"> </el-table-column>
                <el-table-column prop="applyAmount" label="申请提现金额" width="100" align="center"> </el-table-column>
                <el-table-column prop="commission" label="手续费" align="center"> </el-table-column>
                <el-table-column prop="finalAmount" label="实际提现金额" width="100" align="center"> </el-table-column>
                <el-table-column prop="bankAccount" label="银行卡号" width="180" align="center"> </el-table-column>
                <el-table-column prop="bankName" label="银行名字" width="180" align="center"> </el-table-column>
                <el-table-column prop="name" label="持卡人名字" width="100" align="center"> </el-table-column>
                <el-table-column prop="time" label="申请提现时间" width="180" align="center"> </el-table-column>
                <el-table-column prop="status" label="状态" align="center"> </el-table-column>
            </el-table>
           <el-pagination
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
                :current-page="query.pagenum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="query.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageTotal"
            ></el-pagination>
        </el-card>
    </div>
</template>

<script>
import { getUserInfoList, getWithdrawStatus } from '@/api/finace.js'
export default {
  name: 'cashlist',
  data () {
    return {
      tableData: [],
      phoneNum: null,
      cashStatus: null,
      pageTotal: 0,
      query: {
        pagesize: 2,
        pagenum: 1
      },
      options: []
    }
  },
  created () {
    this.getWithdrawStatus()
    this.getUserInfoList()
  },
  mounted () {

  },
  methods: {
    async getWithdrawStatus () {
      const { Data } = await getWithdrawStatus()
      console.log(Data)
      this.options = Data.dictList
    },

    async getUserInfoList () {
      const { Data } = await getUserInfoList({
        pageSize: this.query.pagesize,
        pageIndex: this.query.pagenum,
        mobile: this.phoneNum,
        status: this.cashStatus
      })
      this.tableData = Data.list
      this.pageTotal = Data.paging.totalItemCount
      console.log(Data)
    },

    // 清空搜索信息
    clear () {
      this.cashStatus = ''
      this.phoneNum = ''
    },

    // 根据输入的信息搜索内容
    search () {
      console.log(this.phoneNum, this.cashStatus)
      if (this.phoneNum === null && this.cashStatus === null) return this.$message.error('请输入搜索信息')
      this.getUserInfoList()
    },

    // 监听分页每页条数发生改变
    handleSizeChange (newpagesize) {
      this.query.pagesize = newpagesize
      this.getUserInfoList()
    },

    // 监听分页页数发生改变
    handlePageChange (newpagenum) {
      this.query.pagenum = newpagenum
      this.getUserInfoList()
    },

    out () {

    }
  }
}
</script>

<style scoped>
.w100 {
    width: 100px;
}

.w200 {
    width: 200px;
    margin-right: 10px;
    margin-bottom: 20px;
}

.el-table {
  margin-bottom: 15px;
}
</style>
